<template>
  <el-dialog title="设置" :visible.sync="dialogData.isShow" width="25%">
    <div class="form-box">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formInline"
        label-width="80px"
      >
        <el-form-item label="卡号:" prop="cardNumber">
          <el-input
            v-model="formInline.cardNumber"
            placeholder="请输入卡号"
            maxlength="50"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="password">
          <el-input
            v-model="formInline.password"
            placeholder="请输入密码"
            maxlength="50"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="有效日期:" prop="validityTime">
          <el-date-picker
            v-model="formInline.validityTime"
            type="date"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd"
            placeholder="输入截止日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="dialogData.isShow = false"
        >取 消</el-button
      >
      <el-button type="success" @click="confirm('ruleForm')">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { patchOrdersById } from '@/api/partner/order'
export default {
  props: ['dialogData'],
  data() {
    return {
      formInline: {
        cardNumber: '',
        password: '',
        validityTime: ''
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      },
      rules: {
        cardNumber: [
          { required: true, message: '请输入卡号', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        validityTime: [
          { required: true, message: '请选择截止日期', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    confirm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const { id } = this.dialogData
          patchOrdersById(id, this.formInline, () => {
            this.$emit('refresh')
            this.$message.success('发放成功')
            this.dialogData.isShow = false
          })
        }
      })
    }
  }
}
</script>
<style scoped></style>
